<template>
  <div class="mycube-container">
    <el-card>
      <el-form :inline="true" style="margin-bottom: -22px;">
        <el-form-item label="Cube">
          <el-input v-model="params.cubeName" placeholder="请输入Cube关键字"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="params.owner" placeholder="请选择负责人"></el-input>
        </el-form-item>
        <el-form-item label="项目">
          <project-select v-model="params.projectId"></project-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="params.status">
            <el-option label="全部" value=""></el-option>
            <el-option label="READY" value="READY"></el-option>
            <el-option label="DISABLED" value="DISABLED"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="queryRangeDate"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>我的Cube列表</span>
        <el-button style="float: right; padding: 3px 0" type="text">近90天未查询</el-button>
      </div>
      <el-table :data="pageData.records" v-loading="listLoading" stripe border highlight-current-row style="width: 100%">
        <el-table-column type="index" align="center" width="50"></el-table-column>
        <el-table-column prop="name" label="cube名称" align="left" min-width="150"></el-table-column>
        <el-table-column prop="status" label="状态" align="center"></el-table-column>
        <el-table-column prop="dataSize" label="大小" align="right">
          <template slot-scope="scope">
            <span>{{ scope.row.dataSize | formatDataSize }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="swell" label="膨胀倍数" align="right"></el-table-column>
        <el-table-column prop="queryCount" label="查询次数" align="right"></el-table-column>
        <el-table-column prop="slowQueryCount" label="慢查询" align="right"></el-table-column>
        <el-table-column prop="lastModified" label="最后修改时间" align="center" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.lastModified | formatTimestamp }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip content="查看" placement="top">
              <el-button size="mini" type="primary" icon="el-icon-view" circle style="padding:7px;"
                         @click="handleInfo(scope.$index, scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="调优" placement="top">
              <el-button size="mini" type="warning" icon="el-icon-star-on" circle style="padding:7px;"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-top:20px; text-align: center;" v-show="!listLoading">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="params.page"
          :page-size.sync="params.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import cubeApi from '@/api/kylin/cube'
import ProjectSelect from '../components/ProjectSelect'

export default {
  name: 'my',
  components: {
    ProjectSelect
  },
  data() {
    return {
      params: {
        page: 1,
        limit: 10,
        cubeName: '',
        owner: '',
        projectId: '',
        status: '',
        startDate: '',
        endDate: ''
      },
      queryRangeDate: [],
      pageData: {
        total: 0,
        records: []
      },
      listLoading: false
    }
  },
  methods: {
    query() {
      this.params.page = 1
      this.params.startDate = this.queryRangeDate[0]
      this.params.endDate = this.queryRangeDate[1]
      this.loadData()
    },
    loadData() {
      if (this.listLoading) return
      this.listLoading = true

      var _this = this
      cubeApi.query(this.params).then(resp => {
        setTimeout(() => {
          _this.listLoading = false
          _this.pageData = resp.data
        }, 1000)
      }).catch(() => {
        _this.listLoading = false
      })
    },
    handleSizeChange(size) {
      this.params.limit = size
      this.params.page = 1

      this.loadData()
    },
    handleCurrentChange(page) {
      this.params.page = page

      this.loadData()
    },
    handleInfo(index, row) {
      this.$router.push({ path: '/kylin/cube/info?id=' + row.id })
    }
  },
  created() {
    this.query()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .mycube-container {
    padding: 20px 15px;
    background-color: rgb(240, 242, 245);
  }

</style>
